<template>
    <div class="container">
        <el-card class="box-card" shadow="none">
            <div slot="header" class="clearfix">
                <el-page-header @back="goBack" :content="'我发出的投诉'"></el-page-header>
            </div>
            <div class="itinerary_detail_content">
                <div class="itinerary_overview_box" v-for="it in complaints" :key="it.key">
                    <div class="itinerary_overview">
                        <div class="detail">
                            <h2>{{ it.title }}</h2>
                            <span class="name">{{ it.enterprise }} | {{ it.send_date }}</span>
                        </div>
                        <div class="price">
                        </div>
                        <div class="btn">

                            <h3 :style="it.if_coped === 1 ? { color: '#67C23A' } : { color: '#E6A23C' }"><i
                                    class="el-icon-warning"></i> 处理结果 : {{ it.if_coped === 1 ? '已处理' : '待处理' }}
                            </h3>
                        </div>
                    </div>

                    <div class="notice">
                        <h3><i class="el-icon-warning"></i> 详细描述</h3>
                        <span class="content">{{ it.content }}</span>
                    </div>
                </div>
                <el-empty v-if="complaints.length === 0" description="暂无数据"
                    style="position: absolute;left: 50%;transform: translate(-50%, 10%);"></el-empty>
            </div>
        </el-card>

    </div>
</template>

<script>
import SvgIcon from '@/components/reusable_components/SvgIcon.vue';
export default {
    components: {
        SvgIcon,
    },

    data() {
        return {
            complaints: [],
        }
    },

    mounted() {
        this.index = sessionStorage.index
        this.get_my_complaints()
    },

    methods: {
        // 返回上一页
        goBack() {
            this.$router.back()
        },

        async get_my_complaints() {
            const res = await this.$http.post("/findComplaintBySender", {
                // 携带数据
                sender: Number(sessionStorage.user_id)
            });
            this.complaints = res.data.data
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 61.8vw;
    min-width: 950px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);

    .itinerary_detail_content {
        height: 80vh;
        overflow: auto;

        -ms-overflow-style: none;
        /* IE 10+ */

        scrollbar-width: none;
        /* Firefox */

        .itinerary_overview_box {
            width: 99.8%;
            height: fit-content;
            border: 1px solid rgb(220, 223, 230);
            border-radius: 4px;
            margin-bottom: 10px;

            .itinerary_overview {
                width: 100%;
                height: 100px;
                display: flex;

                .detail {
                    width: 55%;
                    border-right: 5px dashed rgb(220, 223, 230);

                    h2 {
                        margin: 10px 0 10px 20px;
                        font-weight: 500;
                    }

                    .name {
                        color: #99a9bf;
                        font-size: 0.5em;
                        margin: 10px 0 10px 20px;
                    }
                }

                .price {
                    line-height: 100px;
                    text-align: center;
                    width: 15%;
                    height: 100%;
                    font-size: 30px;
                    color: rgb(250, 90, 77);
                    // border-right: 2px dashed rgb(220, 223, 230);
                }

                .btn {
                    margin: 0;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                }
            }

            .notice {
                width: 100%;
                height: 100px;
                border-top: 1px solid rgb(220, 223, 230);

                h3 {
                    margin: 10px 10px 0 20px;
                }

                ol {


                    li {}
                }

                .content {
                    margin: 20px 0 0 20px;
                    font-size: 12px;
                }
            }
        }

    }

    .itinerary_detail_content::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

}

.box-card {
    border: 0;
}
</style>